<template lang="pug">
  .column(:class='{"mobile":isMobile}')
    .left
      slot(name='left')
    .right(v-if="!isMobile")
      // slot(name='right')
      .tags-list.mb(v-if="showTags")
        .title
          svg.icon(aria-hidden="true")
            use(xlink:href="#icon-tags")
          span 标签
        .tags
          nuxt-link(to='/tags', tag="div").item
            svg.icon(aria-hidden="true")
              use(xlink:href="#icon-vuejs")
            span Vue（0）
          nuxt-link(to='/tags', tag="div").item
            svg.icon(aria-hidden="true")
              use(xlink:href="#icon-react")
            span React（0）
          nuxt-link(to='/tags', tag="div").item
            svg.icon(aria-hidden="true")
              use(xlink:href="#icon-javascript-map")
            span Javascript（0）
          nuxt-link(to='/tags', tag="div").item
            svg.icon(aria-hidden="true")
              use(xlink:href="#icon-nodejs")
            span Nodejs（0）
          nuxt-link(to='/tags', tag="div").item
            svg.icon(aria-hidden="true")
              use(xlink:href="#icon-shenghuo")
            span 生活（0）
          nuxt-link(to='/tags', tag="div").item
            svg.icon(aria-hidden="true")
              use(xlink:href="#icon-sikao")
            span 思考（0）
          nuxt-link(to='/tags', tag="div").item
            svg.icon(aria-hidden="true")
              use(xlink:href="#icon-lvhang")
            span 旅行（0）

      .hot-article-list
        .title
          svg.icon(aria-hidden="true")
            use(xlink:href="#icon-unorderedlist")
          span 热门文章
        .title-list
          nuxt-link(to='/code', tag="div", v-for="(item, index) in 10" :key="index").item
            span {{index + 1}} 
            .i 这里是文章标题
</template>

<script>
export default {
  props: {
    showTags: {
      default: true
    }
  },
  computed: {
    isMobile () {
      return this.$store.state.view.isMobile
    }
  }
}
</script>


<style lang="stylus" scoped>
.column
  width 100%
  display flex
  flex-flow row nowrap
  &.mobile
    flex-flow column nowrap
    .right
      flex 1
      width auto
      margin-left 0
  .left
    flex 1
  .right
    flex 0 0 3rem
    width 3rem
    margin-left .15rem
    overflow hidden

    .hot-article-list, .tags-list
      width 100%
      background $White
      border-radius .05rem
      &.mt
        margin-top .15rem
      &.mb
        margin-bottom .15rem
      .title
        padding .12rem
        display flex
        align-items center
        border-bottom 1px solid $dWhite
        color $lBlack
        .icon
          width .2rem
          height .2rem
          opacity .7
        span
          font-size .14rem
          margin-left .1rem
      .title-list
        padding .12rem
        .item
          cursor pointer
          display flex
          align-items center
          margin-bottom .1rem
          span
            display inline-block
            border-radius .02rem
            width .2rem
            height .2rem
            text-align center
            line-height .2rem
            margin-right .1rem
            background $elSilver
          .i
            font-size .13rem
            color $lBlack
            position relative
            left 0
            transition all .2s
          &:hover
            .i
              color $Black
              left .03rem
    .tags-list
      border-radius .05rem
      .tags
        padding .12rem
        display flex
        flex-flow row wrap
        .item
          border-radius .02rem
          display flex
          align-items center
          padding .06rem .08rem
          margin 0 .1rem .1rem 0
          background $elSilver
          transition all .2s
          cursor pointer
          &:hover
            background $Silver
          .icon
            width .17rem
            height .17rem
          span
            margin-left .06rem
</style>
